<script setup>
import {ref} from "vue";
import {mainListService} from "@/apis/book";

const hotList = ref([])

const mainList = async () => {
    let result = await mainListService();
    hotList.value = result.data;
}
mainList();
</script>

<template>
    <div class="box wrapper">
        <div class="title">
            <h2>书籍推荐</h2>
            <a href="">查看全部</a>
        </div>

        <div class="content clearfix" id="boxShow">
            <ul>
                <li v-for="item in hotList" :key="item.id">
                    <RouterLink :to="`/detail/${item.id}`">
                        <img v-img-lazy="item.img" alt="">
                        <h3>{{item.name}}</h3>
                        <p>销量{{item.sales}}</p>
                        <p class="price">￥{{parseFloat(item.price).toFixed(2)}}<span>￥{{parseFloat(item.oldPrice).toFixed(2)}}</span></p>
                    </RouterLink>
                </li>
            </ul>
        </div>

    </div>
</template>

<style scoped>
.box {
    margin-top: 15px;
}

.box .title {
    height: 40px;
}

.box .title h2 {
    float: left;
    font-size: 20px;
    font-weight: 400;
    color: #b1191a;
    line-height: 40px;
}

.box .title a {
    float: right;
    margin-right: 30px;
    font-size: 12px;
    color: black;
    line-height: 40px;
}

.box .content {
    border-top: 2px solid #b1191a;

}

.box .content li {
    position: relative;

    float: left;
    text-align: center;
    margin-right: 15px;
    margin-bottom: 15px;
    width: 228px;
    height: 350px;
    background-color: #fff;
    box-shadow: 0px 3px 8px 1px #999;
    border-radius: 20px;
}

.box .content li:nth-child(5n) {
    margin-right: 0px;
}

.box .content li img {
    margin-top: 10px;
    width: 220px;
    height: 220px;
    object-fit: contain;
}

.box .content li h3 {
    padding: 10px;
    font-size: 16px;
    color: #050505;
    font-weight: 500;
    height: 40px;
    overflow: hidden;
}

.box .content li p {
    font-size: 12px;
    color: #999;
}

.box .content li .price {
    margin-top: 5px;
    font-size: 18px;
    color: #b1191a;
    font-weight: bold;
}

.box .content li .price span {
    text-decoration: line-through;
    color: #999;
    font-size: 12px;
    padding-left: 10px;
}

.box .content li .hot {
    position: absolute;

    right: -4px;
    top: 4px;

    width: 40px;
}
</style>